<div class="content">
    <div id="example_title">
        <h1>Tooltips</h1>
        All toolbar items have tooltip property
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="toolbar"></div>

<div style="height: 40px"></div>
Tooltip position:<br>
<div style="padding: 10px">
    <label><input type="radio" name="position" onclick="w2ui.toolbar.tooltip = 'top'; w2ui.toolbar.refresh()" checked>&nbsp;&nbsp;Top</label><br>
    <label><input type="radio" name="position" onclick="w2ui.toolbar.tooltip = 'bottom'; w2ui.toolbar.refresh()">&nbsp;&nbsp;Bottom</label><br>
    <label><input type="radio" name="position" onclick="w2ui.toolbar.tooltip = 'left'; w2ui.toolbar.refresh()">&nbsp;&nbsp;Left</label><br>
    <label><input type="radio" name="position" onclick="w2ui.toolbar.tooltip = 'right'; w2ui.toolbar.refresh()">&nbsp;&nbsp;Right</label><br>
</div>

<!--CODE-->
<script type="module">
import { w2toolbar } from '__W2UI_PATH__'

new w2toolbar({
    box: '#toolbar',
    name: 'toolbar',
    tooltip: 'top',
    items: [
        { type: 'check',  id: 'item1', text: 'Check', icon: 'fa fa-check-square-o', checked: true, tooltip: 'Tooltip text' },
        { type: 'break',  id: 'break0' },
        { type: 'menu-radio',   id: 'item2', text: 'Menu', icon: 'fa fa-table', count: 17, tooltip: 'Tooltip text can be very very long',
            items: [
                { text: 'Item 1', icon: 'fa fa-camera', count: 5 },
                { text: 'Item 2', icon: 'fa fa-picture-o', disabled: true },
                { text: 'Item 3', icon: 'fa fa-glass', count: 12 }
            ]
        },
        { type: 'break', id: 'break1' },
        { type: 'radio',  id: 'item3',  group: '1', text: 'Radio 1', icon: 'fa fa-star', checked: true, tooltip: 'Tooltip text can also be<br>in multiple lines' },
        { type: 'radio',  id: 'item4',  group: '1', text: 'Radio 2', icon: 'fa fa-heart',
            tooltip(item) {
                return 'Can also be result of a function: ' + item.text
            }
        },
    ],
    onClick(event) {
        event.done(() => {
            let item = event.detail.item
            let subItem = event.detail.subItem
            if (subItem) {
                console.log('Selected:', event.detail.item.selected)
            } else {
                console.log('Clicked:', event.detail.item.id)
            }
        })
    }
})
</script>
